<template>
  <div class="upload-example">
    <h3>上传组件使用示例</h3>
    
    <!-- 图片上传组件示例 -->
    <div class="example-section">
      <h4>图片上传组件</h4>
      <ImageUpload
        v-model="imageFiles"
        :max-count="3"
        :max-size="5"
        accept-types=".jpg,.jpeg,.png,.gif"
        :show-tips="true"
      />
      <div class="result-display">
        <h5>绑定的数据：</h5>
        <pre>{{ JSON.stringify(imageFiles, null, 2) }}</pre>
      </div>
    </div>

    <!-- 文件上传组件示例 -->
    <div class="example-section">
      <h4>文件上传组件</h4>
      <DocumentUpload
        v-model="documentFiles"
        :max-count="5"
        :max-size="10"
        accept-types=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
        :show-tips="true"
      />
      <div class="result-display">
        <h5>绑定的数据：</h5>
        <pre>{{ JSON.stringify(documentFiles, null, 2) }}</pre>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleSubmit">提交表单</el-button>
      <el-button @click="checkUploadStatus">检查上传状态</el-button>
      <el-button @click="clearAll">清空所有</el-button>
    </div>

    <!-- 状态显示 -->
    <div class="status-display">
      <p>页面上传状态：{{ uploadStatus }}</p>
      <p>正在上传的文件数量：{{ uploadingCount }}</p>
    </div>
  </div>
</template>

<script>
import ImageUpload from './ImageUpload.vue'
import DocumentUpload from './DocumentUpload.vue'
import { 
  hasFilesUploading, 
  getUploadingFilesCount, 
  uploadCheckMixin,
  globalUploadManager 
} from '@/utils/uploadUtils'

export default {
  name: 'UploadExample',
  components: {
    ImageUpload,
    DocumentUpload
  },
  mixins: [uploadCheckMixin],
  data() {
    return {
      imageFiles: [],
      documentFiles: [],
      uploadStatus: '无上传',
      uploadingCount: 0,
      statusTimer: null
    }
  },
  mounted() {
    // 启动状态检查定时器
    this.startStatusCheck()
    
    // 添加全局上传状态观察者
    globalUploadManager.addObserver(this.onUploadStatusChange)
  },
  beforeDestroy() {
    // 清理定时器
    if (this.statusTimer) {
      clearInterval(this.statusTimer)
    }
    
    // 移除观察者
    globalUploadManager.removeObserver(this.onUploadStatusChange)
  },
  methods: {
    // 开始状态检查
    startStatusCheck() {
      this.statusTimer = setInterval(() => {
        this.updateStatus()
      }, 1000)
    },
    
    // 更新状态显示
    updateStatus() {
      const hasUploading = hasFilesUploading()
      const count = getUploadingFilesCount()
      
      this.uploadStatus = hasUploading ? '有文件正在上传' : '无上传'
      this.uploadingCount = count
    },
    
    // 上传状态变化回调
    onUploadStatusChange(event, target) {
      console.log('Upload status changed:', event, target)
      this.updateStatus()
    },
    
    // 检查上传状态
    checkUploadStatus() {
      const hasUploading = this.$hasFilesUploading()
      const count = this.$getUploadingFilesCount()
      
      this.$message.info(`当前上传状态：${hasUploading ? '有文件正在上传' : '无上传'}，数量：${count}`)
    },
    
    // 提交表单
    handleSubmit() {
      // 使用安全提交方法
      this.$safeSubmit(() => {
        // 实际的提交逻辑
        console.log('提交数据：', {
          images: this.imageFiles,
          documents: this.documentFiles
        })
        this.$message.success('提交成功！')
      }, {
        message: '检测到有文件正在上传中，请等待上传完成后再提交'
      })
    },
    
    // 清空所有文件
    clearAll() {
      this.imageFiles = []
      this.documentFiles = []
      this.$message.info('已清空所有文件')
    }
  }
}
</script>

<style scoped>
.upload-example {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.example-section h4 {
  margin-top: 0;
  color: #303133;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.result-display {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-display h5 {
  margin: 0 0 10px 0;
  color: #606266;
}

.result-display pre {
  margin: 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  color: #303133;
  overflow-x: auto;
}

.action-buttons {
  margin: 30px 0;
  text-align: center;
}

.action-buttons .el-button {
  margin: 0 10px;
}

.status-display {
  padding: 15px;
  background-color: #ecf5ff;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.status-display p {
  margin: 5px 0;
  color: #303133;
  font-size: 14px;
}
</style>